<template>
  <div class="header-container">

    <div class="left-content">
      <!--   折叠按钮   -->
      <el-button icon="el-icon-menu" size="mini" @click="handlerMenu"></el-button>
    </div>
    <div class="right-content">

      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <img class="user" src="../assets/images/pic.jpg" alt="">
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

    </div>

  </div>
</template>

<script>
import {removeToken} from "@/utils/auth";

export default {
  data() {
    return {};
  },
  methods: {
    handlerMenu() {
      this.$store.commit("collapseMenu")
    },
    handleCommand(command) {
      if (command === 'logout') {
        removeToken()
        this.$router.push({name: 'login'})
      }
    }
  },
  computed: {
    // ...mapState({
    //   tags: state => state.tab.tabList
    // })
  }
}
</script>

<style scoped lang="less">
.header-container {
  padding: 0 20px;
  background-color: #333;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left-content {
    display: flex;
    align-items: center;

    /deep/ .el-breadcrumb__item {
      .el-breadcrumb__inner {
        &.is-link {
          font-size: 14px;
          font-weight: 400;
          color: #bbbbbb;
        }
      }

      &:last-child {
        .el-breadcrumb__inner {
          color: #ffffff;
        }
      }
    }

  }

  .text {
    margin-left: 10px;
    color: #ffffff;
  }

  .user {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

}

</style>
